<script setup>
import { ref } from 'vue';
import { getUserList, deleteUser } from '@/network/user';
import { message } from 'ant-design-vue';
import dayjs from "dayjs";

const columns = [
  {
    title: '用户名',
    dataIndex: 'userName',
  },
  {
    title: '昵称',
    dataIndex: 'nickName',
  },
  {
    title: '手机号码',
    dataIndex: 'phoneNumber',
  },
  {
    title: '头像',
    dataIndex: 'avatar',
  },
  {
    title: '性别',
    dataIndex: 'sex',
  },
  {
    title: '类型',
    dataIndex: 'userType',
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
  },
  {
    title: '操作',
    key: 'action',
  },
];

const pageNum = ref(1);
const pageSize = ref(4);
const total = ref(0);

const userName = ref("");
const phoneNumber = ref("");

const onSearch = (searchValue) => {
  fetchData(userName.value, phoneNumber.value);
};

const onChange = (pageNumber) => {
  pageNum.value = pageNumber;
  fetchData(userName.value, phoneNumber.value);
};

const data = ref([]);

// 获取数据
const fetchData = async (userName, phoneNumber) => {
  const res = await getUserList(pageNum.value, pageSize.value, userName, phoneNumber);
  if (res.code === 200 && res.data) {
    data.value = res.data.rows;
    total.value = res.data.total;
  } else {
    message.error(res.message);
  }
}
fetchData();



// 删除数据
const removeUser = async (id) => {
  if (!id) {
    message.warning("请选择数据后操作");
    return;
  };
  const ids = [id];
  const res = await deleteUser(ids);
  if (res.code === 200) {
    fetchData(userName.value, phoneNumber.value);
    message.success("删除成功");
  } else {
    message.error("删除失败");
  }
};
</script>

<template>
  <div id="user-manage">
    <a-input-search style="max-width: 320px; margin-bottom: 20px;" v-model:value="userName" placeholder="请输入用户名"
      enter-button="搜索" size="large" @search="onSearch" />
    <a-table :columns="columns" :data-source="data" :pagination="false">
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'avatar'">
          <a-image :width="60" :src="record.avatar" />
        </template>
        <template v-else-if="column.dataIndex === 'sex'">
          <div v-if="record.sex === '0'">
            <a-tag color="cyan">男</a-tag>
          </div>
          <div v-else-if="record.sex === '1'">
            <a-tag color="pink">女</a-tag>
          </div>
          <div v-else>
            <a-tag color="red">未知</a-tag>
          </div>
        </template>
        <template v-else-if="column.dataIndex === 'userType'">
          <div v-if="record.userType === '0'">
            <a-tag color="green">管理员</a-tag>
          </div>
          <div v-else>
            <a-tag color="blue">普通用户</a-tag>
          </div>
        </template>
        <template v-else-if="column.dataIndex === 'createTime'">
          {{ dayjs(record.createTime).format("YYYY-MM-DD HH:mm:ss") }}
        </template>
        <template v-else-if="column.key === 'action'">
          <a-button danger size="small" @click="removeUser(record.id)">删除</a-button>
        </template>
      </template>
    </a-table>

    <a-pagination class="page-info" v-model:current="pageNum" v-model:page-size="pageSize" :total="total"
      :show-total="total => `共 ${total} 条`" @change="onChange" />
  </div>
</template>

<style scoped>
.page-info {
  margin: 20px auto;
  text-align: center;
}
</style>